{% extends 'layout/base.html' %}
{% load profile %}
{% load static %}
{% block css %}
    {#    使用markdown必备样式#}
    <link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.preview.min.css' %}">
    <style>
        .comments-list .row .col-sm-11 span {
            margin-right: 40px;
        }
    </style>
{% endblock css %}

{% block js %}
    {#    markdown必备js#}
    {# Markdown显示必用插件 #}
    <script src="{% static 'plugin/editor-md/editormd.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/marked.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/prettify.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/raphael.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/underscore.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/sequence-diagram.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/flowchart.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/jquery.flowchart.min.js' %}"></script>

    <script type="text/javascript">
        $(function () {
            previewMarkdown();
            comments();
        })

        // 处理Markdown预览
        function previewMarkdown() {
            editormd.markdownToHTML('previewMarkdown', {
                {#避免一些攻击#}
                htmlDecode: 'Style.script.iframe'
            });
        }

        // 处理评论
        function comments() {
            $('#comments-submit').click(function () {
                $.ajax({
                    url: '{% url 'blog:comments' note.id %}',
                    type: 'POST',
                    data: $('#commentsForm').serialize()
                }).done(function (data) {
                    if (data.code === 200) {
                        location.href = '{% url "blog:article" note.id %}';
                    } else {
                        $.each(data.msg, function (key, value) {
                            $('#id_' + key).next().text(value[0])
                        });
                    }
                }).fail(function () {
                    console.log("网络连接超时");
                })
            });
        }
    </script>
{% endblock js %}

{% block title %}博客详细{% endblock title %}


{% block navbar %}
    <nav class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{% url 'blog:index' %}">Home</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">  <!--修复下拉显示-->
                <ul class="nav navbar-nav navbar-right">
                    {% if request.user %}
                        {% if request.user.is_super %}
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-haspopup="true" aria-expanded="false">
                                    {#用户头像#}
                                    {% user_profile request %}&nbsp;&nbsp;
                                    {{ request.user.username|title }} <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="{% url 'blog:editor' %}">添加文章</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="{% url 'blog:modify' note.id %}">修改文章</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="{% url 'blog:profile' %}">个人中心</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="{% url 'blog:logout' %}">退出</a></li>
                                </ul>
                            </li>
                        {% else %}
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-haspopup="true" aria-expanded="false">
                                    {#用户头像#}
                                    {% user_profile request %}&nbsp;&nbsp;
                                    {{ request.user.username|title }} <span
                                        class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="{% url 'blog:profile' %}">个人中心</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="{% url 'blog:logout' %}">退出</a></li>
                                </ul>
                            </li>
                        {% endif %}
                    {% else %}
                        <li><a href="{% url 'blog:login' %}">登录</a></li>
                        <li><a href="{% url 'blog:register' %}">注册</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
{% endblock navbar %}
{% block content %}

    <div id="previewMarkdown" style="margin-bottom: 100px">
        <textarea>{{ note.content }}</textarea>
    </div>

    <div class="panel panel-default" style="margin-bottom: 100px">
        <div class="panel-heading">
            <h3 class="panel-title">
                评论区
            </h3>
        </div>
        <div class="panel-body">
            <div class="comments-list">
                <!--置顶评论-->
                {% for item in top_comments %}
                    <div class="row">
                        <div class="col-sm-1">
                            <a class="navbar-brand" href="#">
                                <img alt="user" width="30" height="30" style="border-radius: 50%"
                                     src="{{ item.user.image }}">
                            </a>
                        </div>
                        <div class="col-sm-11" style="margin-bottom: 20px">
                            <div class="panel panel-default" style="margin-bottom: 4px">
                                <div class="panel-body" style="padding: 4px; height: 40px">{{ item.content }}</div>
                            </div>
                            <span>
                                <i class="fa fa-clock-o"
                                   aria-hidden="true"></i> ：{{ item.create_datetime|date:'Y-m-d' }}
                            </span>
                            <span>
                                <i class="fa fa-user-o" aria-hidden="true"></i> ：{{ item.user.username|capfirst }}
                            </span>
                            {% if request.user.is_super %}
                                <a href="{% url 'blog:comments_operate' item.note.id item.id %}?not_top=1">
                                    <span>
                                        <i class="fa fa-caret-up" aria-hidden="true"></i> 取消置顶
                                    </span>
                                </a>
                            {% endif %}
                            <a href="{% url 'blog:comments_operate' item.note.id item.id %}?up=1">
                                    <span>
                                        <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 赞 {{ item.up }}
                                    </span>
                            </a>
                            <a href="{% url 'blog:comments_operate' item.note.id item.id %}?down=1">
                                    <span>
                                        <i class="fa fa-thumbs-o-down" aria-hidden="true"></i> 踩 {{ item.down }}
                                    </span>
                            </a>
                        </div>
                    </div>
                {% endfor %}

                <!--非置顶评论-->
                {% for item in comments %}
                    <div class="row">
                        <div class="col-sm-1">
                            <a class="navbar-brand" href="#">
                                <img alt="user" width="30" height="30" style="border-radius: 50%"
                                     src="{{ item.user.image }}">
                            </a>
                        </div>
                        <div class="col-sm-11" style="margin-bottom: 20px">
                            <div class="panel panel-default" style="margin-bottom: 4px">
                                <div class="panel-body" style="padding: 4px; height: 40px">{{ item.content }}</div>
                            </div>
                            <span>
                                <i class="fa fa-clock-o"
                                   aria-hidden="true"></i> ：{{ item.create_datetime|date:'Y-m-d' }}
                            </span>
                            <span>
                                <i class="fa fa-user-o" aria-hidden="true"></i> ：{{ item.user.username|capfirst }}
                            </span>
                            {% if request.user.is_super %}
                                <a href="{% url 'blog:comments_operate' item.note.id item.id %}?top=1">
                                    <span>
                                        <i class="fa fa-caret-up" aria-hidden="true"></i> 置顶
                                    </span>
                                </a>
                            {% endif %}
                            <a href="{% url 'blog:comments_operate' item.note.id item.id %}?up=1">
                                    <span>
                                        <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 赞 {{ item.up }}
                                    </span>
                            </a>
                            <a href="{% url 'blog:comments_operate' item.note.id item.id %}?down=1">
                                    <span>
                                        <i class="fa fa-thumbs-o-down" aria-hidden="true"></i> 踩 {{ item.down }}
                                    </span>
                            </a>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <div class="comments">
                {% if request.user %}
                    <form id="commentsForm" method="post">
                        {% csrf_token %}
                        {% for field in form %}
                            <div class="form-group">
                                {{ field }}
                                <span class="error-msg">{{ field.errors.0 }}</span>
                            </div>
                        {% endfor %}

                        <div class="form-group" style="float: right">
                            <button type="button" class="btn btn-primary" id="comments-submit">发表</button>
                        </div>
                    </form>
                {% else %}
                    <div class="panel panel-default">
                        <div class="panel-body">
                            请<a href="{% url 'blog:login' %}">登录</a>后评论哦,没有账号？来<a
                                href="{% url 'blog:register' %}">注册</a>一个属于你自己的账号吧！😉
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock content %}